<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>轩盛金融</title>
    <meta name="keywords" content="轩盛金融">
    <meta name="description" content="轩盛金融">
    <link rel="shortcut icon" href="favicon.ico">
    <link href="__CSS__/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="__CSS__/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="__CSS__/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="__CSS__/animate.min.css" rel="stylesheet">
    <link href="__CSS__/style.min862f.css?v=4.1.0" rel="stylesheet">
    <link href="__JS__/layui/css/layui.css"rel="stylesheet">

</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">

        <!-- Panel Other -->
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>文章分类</h5>
                <div class="ibox-tools">
                    <a class="collapse-link">
                        <i class="fa fa-chevron-up"></i>
                    </a>
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        <i class="fa fa-wrench"></i>
                    </a>
                   <!--  <ul class="dropdown-menu dropdown-user">
                        <li><a href="#">选项1</a>
                        </li>
                        <li><a href="#">选项2</a>
                        </li>
                    </ul> -->
                    <a class="close-link">
                        <i class="fa fa-times"></i>
                    </a>
                </div>
            </div>

            <div class="ibox-content">
                <div class="row row-lg">

                    <div class="col-sm-12">
                        <!-- Example Events -->
                        <div class="example-wrap">
                            <!-- <h4 class="example-title">选择产品分类</h4> -->
                            
                            <div class="example">
                                <div class="alert alert-success" id="tableEventsResult" role="alert">
                                    <h3>文章分类</h3>
                                </div>
                                <div class="btn-group hidden-xtableEventsToolbar" role="group">
                                    <button type="button" id="addClassfiyBtn" class="btn btn-outline btn-default">
                                        <i class="glyphicon glyphicon-plus" aria-hidden="true"></i>
                                    </button>
<!--                                     <button type="button" class="btn btn-outline btn-default">
                                        <i class="glyphicon glyphicon-heart" aria-hidden="true"></i>
                                    </button> -->
                                    <button type="button" id="removeBtn" class="btn btn-outline btn-default">
                                        <i class="glyphicon glyphicon-trash" aria-hidden="true"></i>
                                    </button>

                                </div>
                                
                                <table id="tableEvents" data-mobile-responsive="true">

                                </table>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            
            <!--添加分类模态框  -->
            <div class="container">
                
                <div class="modal fade" id="addClassfiy" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                  <div class="modal-dialog" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">添加新分类</h4>
                      </div>
                      <div class="modal-body">
                        <form id="formTable" class="form-horizontal">
                          <div class="form-group">
                            <label for="classfiyName" class="col-sm-2 control-label">分类名称</label>
                            <div class="col-sm-10">
                              <input type="text" name="classfiyName" class="form-control" id="classfiyName" placeholder="分类名称">
                            </div>
                          </div> 
                        </form>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" id="upload">保存并提交</button>
                      </div>
                    </div>
                  </div>
                </div>
            </div>

            <!-- 待确认删除 -->
            <div class="container">
                
                <div class="modal fade" id="removeClassfiyTip" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                  <div class="modal-dialog" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">删除分类</h4>
                      </div>
                      <div class="modal-body">
                        <h3>若删除该分类，该分类包含的商品全部删除，是否确定删除？</h3>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-danger" onclick="submitDelete(this)" id="okRemoveClassfiy">确认删除</button>
                      </div>
                    </div>
                  </div>
                </div>
            </div>

            <!-- 更新数据 -->
            <div class="container">
                
                <div class="modal fade" id="upDataClassfiy" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                  <div class="modal-dialog" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">修改分类名称</h4>
                      </div>
                      <div class="modal-body">
                        <form id="formUpdata" class="form-horizontal">
                          <div class="form-group">
                            <label for="UpdataClassfiyName" class="col-sm-2 control-label">分类名称</label>
                            <div class="col-sm-10">
                              <input type="text" name="classfiyName" class="form-control" id="UpdataClassfiyName" placeholder="分类名称">
                            </div>
                          </div> 
                        </form>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" onclick="submitUpdate(this)" id="upDataBtn">保存并提交</button>
                      </div>
                    </div>
                  </div>
                </div>
            </div>

        </div>
        <!-- End Panel Other -->
    </div>
    <script src="__JS__/jquery.min.js?v=2.1.4"></script>
    <script src="__JS__/bootstrap.min.js?v=3.3.6"></script>
    <script src="__JS__/content.min.js?v=1.0.0"></script>
    <script src="__JS__/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="__JS__/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
    <script src="__JS__/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="__JS__/layui/layui.js"></script>
    <script type="text/javascript">
    
    // 全局变量
        var g_ClassfiyId;

    // 常用变量
        // bootstrap-table
        $table = $('#tableEvents');
        // 表单
        $formTable = $('#formTable');

    // layUi 弹出层
        function Layer(callback){
            layui.use('layer',function(){
                var layer = layui.layer;
                callback();
            })
        }

    // ajax封装
        function requestAjax(requestType,requestUrl,requestData,requestCT){
            this.requestType = requestType;
            this.requestUrl = requestUrl;
            this.requestData = requestData;
            this.requestContentType = requestCT
        }
        requestAjax.prototype.ajax = function(callBack){
            $.ajax({
                type: this.requestType,
                contentType:this.requestContentType,
                dataType: "json",//预期服务器返回的数据类型
                url: this.requestUrl ,
                data: this.requestData,
                success: function (data) {
                    // ajax 成功方法
                    callBack(data);
                }
            })
        }
    // 弹出层
        function tipShow(btn,id){
            $(btn).on('click',function(){
                $(id).modal('show');
            })
        } 

    // 封装刷新 , 如果出现bug , 刷新数据表
        function refreshData(url){
            this.url = url;
        }
        refreshData.prototype.refresh = function(){
            $table.bootstrapTable('refresh', {
                // 无察觉刷新
                silent:true,
                url: this.url
            });
        }

    // 重构 右边红色删除 (使用中)
        function deleteData(e){
            var id = e.dataset.classfiyid;
            $('#removeClassfiyTip').modal('show');
            g_ClassfiyId = id;
        }
    // 点击确定删除 (使用中)
        function submitDelete(){
            var id = parseInt(g_ClassfiyId);
            var removeClass = new requestAjax('POST','productCatRemove',JSON.stringify({classifyId:id}),'application/json; charset=utf-8');

            // 转数组,为了用bootstrap API
            var removeClassfiy = [id];

            // 删除API
            removeClass.ajax(function(data){
                if(data == 1){
                    // values:一定要数组
                    $table.bootstrapTable('remove',{
                        field:'cat_id',
                        values:removeClassfiy
                    })

                    $('#removeClassfiyTip').modal('hide');
                    Layer(function(){
                        layer.msg('删除成功！', {icon: 1});
                    })
                }
            })
        }
    // 重构 右边更新数据 (使用中)
        function updateData(e){
            var id = e.dataset.classfiyid;
            $('#upDataClassfiy').modal('show');
            g_ClassfiyId = id;
        } 
    // 点击确定更新 (使用中)
        function submitUpdate(){

            var id = g_ClassfiyId;       
            var value = $('#UpdataClassfiyName').val();

                if( value === '' ){
                    alert('不允许为空');
                    return false;

                }else {
                    // 实例化构造器
                    var uploadClassfiy = new requestAjax('POST','productCatUpdata',{
                        classifyId: id,
                        content: value
                    },'application/x-www-form-urlencoded;charset=utf-8');
                    // 调用ajax构造方法
                    uploadClassfiy.ajax(function(data){
                        // 如果后台添加成功,返回新数组
                        if(data == 1){
                            $('#upDataClassfiy').modal('hide');
                            $('#UpdataClassfiyName').val('');
                            // 刷新数据
                            var refresh = new refreshData('productCat');
                            refresh.refresh();
                        }
                    });
                } 
        }

    // 初始化 bootstrap-table
        $table.bootstrapTable({
            url: "categoryList",
            method: 'GET',
            responseHandler:function(res){
                return res;
            },
            search: true,
            searchOnEnterKey:true,
            pagination: true,
            showRefresh: true,
            showColumns:true,
            uniqueId:'cat_id',
            // showToggle: true,
            // showColumns: true,
            iconSize: "outline",
            toolbar: "#tableEventsToolbar",
            icons: {
                refresh: "glyphicon-repeat",
                Columns: "glyphicon-list-alt",
                // columns: "glyphicon-list"
            },
            columns:[
                {field: "state",checkbox:true},
                {field:'cat_id',title:'分类id',sortable:true,width:'15%',align: 'center'},
                {field:'cat_name',title:'文章分类名称',align: 'center'},
                {field:'cat_id',title:'操作',align:'center',formatter:function(value,row,index){
                    var value = value;
                    var rowIndex = index;
                    var result = '';
                    result += `<button class="btn btn-primary updata" data-rowIndex="${rowIndex}" data-ClassfiyId="${value}" onClick="updateData(this)" ><i class="fa fa-pencil"></i></button> `;
                    result += ` <button class="btn btn-danger classifyRemove" data-rowIndex="${rowIndex}" data-ClassfiyId="${value}" onClick="deleteData(this)" ><i class="fa fa-trash-o"></i></button>`;
                    return result;
                }},
            ],
            striped:true,
        })


    // 点击 新增添加类
        tipShow('#addClassfiyBtn','#addClassfiy');

    // 点击提交添加类
        $('#upload').on('click',function(){

            var value = $('#classfiyName').val();

            if( value === '' ){
                alert('不允许为空');
                return false;

            }else {
                // 实例化构造器
                var uploadClassfiy = new requestAjax('POST','productCatAdd',$formTable.serialize(),'application/x-www-form-urlencoded;charset=utf-8');
                // 调用ajax构造方法
                uploadClassfiy.ajax(function(data){
                    // 如果后台添加成功,返回新数组
                    if(data){
                        $('input[name=classfiyName]').val('');
                        $table.bootstrapTable('load',data);
                        $('#addClassfiy').modal('hide');
                    }
                });
            } 

        })

    // 点击tableEventsToolbar删除
        $('#removeBtn').on('click',function(e){

            // 调用 弹出层
            Layer(function(){
                
                layer.confirm('若删除该分类，该分类包含的商品全部删除，是否确定删除？', {icon: 3, title:'提示'}, function(index){

                    // 返回的是数组 [3]
                        var removeId = $.map($table.bootstrapTable('getSelections'), function (row) {
                            return row.cat_id;
                        });
                        
                        var removeClassfiy = new requestAjax('POST','productCatRemove',JSON.stringify({classifyId:removeId}),'application/json; charset=utf-8');
                        removeClassfiy.ajax(function(data){

                            if(data == 1){
                                // values:一定要数组
                                $table.bootstrapTable('remove',{
                                    field:'cat_id',
                                    values:removeId
                                });

                                layer.msg('删除成功！', {icon: 1});
                            }
                        })
                });
            })


            
        })


    </script>

</body>
</html>
